<template>
	<view class="box">
		<view class="top" :style="{height:marginNavTop,top:0}">
			<view class="navbar" :style="{paddingTop:statusBarHeight,height:statusNavHeight}">
				<view class="navTop" :style="{height:statusNavHeight}">
					<view class="left" @click="goBack">
						<image src="/static/img/back.svg" mode="aspectFit" class="image"></image>
					</view>
					<view class="center">探探</view>
					<view class="right"></view>
				</view>
			</view>
		</view>

		<view class="content" :style="{paddingTop:marginNavTop}">
			<view class="cards-container">
				<view class="card" v-for="(item, index) in visibleCards" :key="item.id">
					<view class="card-inner" :class="{ moving: moving && index === 0 }"
						:style="index === 0 && moving ? 'transform: translateX(' + moveX + 'px) rotate(' + (moveX * 0.1) + 'deg)' : ''"
						@touchstart.stop="touchStart($event)" @touchmove.stop="touchMove($event)"
						@touchend.stop="touchEnd($event)">

						<!-- 上半部分：照片轮播 -->
						<view class="photos-swiper">
							<swiper class="swiper" :current="currentPhoto" @change="photoChange" circular>
								<swiper-item v-for="(photo, photoIndex) in item.photos" :key="photoIndex">
									<image :src="photo" mode="aspectFill" class="photo"></image>
								</swiper-item>
							</swiper>
							<!-- 照片指示器 -->
							<view class="photo-dots">
								<view class="dot" v-for="(photo, photoIndex) in item.photos" :key="photoIndex"
									:class="{ active: currentPhoto === photoIndex }"></view>
							</view>
						</view>

						<!-- 下半部分：个人信息 -->
						<view class="info-section">
							<view class="basic-info">
								<view class="name-age">
									<text class="name">{{item.name}}</text>
									<text class="age">{{item.age}}岁</text>
								</view>
								<view class="occupation">{{item.occupation}}</view>
							</view>

							<view class="tags">
								<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
							</view>
						</view>

						<!-- 滑动提示图标 -->
						<view class="swipe-overlay" :class="{ 'like': moveX > 0, 'dislike': moveX < 0 }"
							:style="{opacity: Math.abs(moveX) > 0 ? Math.min(Math.abs(moveX) / 100, 1) : 0}">
							<image :src="moveX > 0 ? '/static/img/like.png' : '/static/img/dislike.png'"
								mode="aspectFit">
							</image>
						</view>
					</view>

					<!-- 将按钮移到 card-inner 外面 -->
					<view class="action-buttons">
						<view class="action-btn reset-btn" @click="resetAll">
							<image src="/static/img/reset.png" mode="aspectFit"></image>
						</view>
						<view class="action-btn dislike-btn" @click="processSwipe(false)">
							<image src="/static/img/dislike.png" mode="aspectFit"></image>
						</view>
						<view class="action-btn like-btn" @click="processSwipe(true)">
							<image src="/static/img/like.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusNavHeight: 0,
				marginNavTop: 0,
				currentPhoto: 0,
				cards: [{
						id: 1,
						name: '赵思思',
						age: 23,
						occupation: '设计师 · 文化/艺术',
						tags: ['双鱼座', '现在活跃', '爱旅行', '喜欢摄影'],
						photos: [
							'/static/img/test1.jpg',
							'/static/img/test2.jpg',
							'/static/img/test1.jpg'
						]
					},
					{
						id: 2,
						name: '郑翔杰',
						age: 25,
						occupation: '市场 · IT/互联网',
						tags: ['天蝎座', '现在活跃'],
						photos: [
							'/static/img/test2.jpg',
							'/static/img/test1.jpg'
						]
					},
					{
						id: 3,
						name: '李晨曦',
						age: 27,
						occupation: '产品经理 · IT/互联网',
						tags: ['射手座', '离线'],
						photos: [
							'/static/img/test1.jpg'
						]
					},
					{
						id: 4,
						name: '王美玲',
						age: 22,
						occupation: '插画师 · 文化/艺术',
						tags: ['天秤座', '现在活跃'],
						photos: [
							'/static/img/test2.jpg'
						]
					},
					{
						id: 5,
						name: '陈浩',
						age: 30,
						occupation: '运营 · 教育',
						tags: ['摩羯座', '最近活跃'],
						photos: [
							'/static/img/test2.jpg'
						]
					},
					{
						id: 6,
						name: '杨倩倩',
						age: 26,
						occupation: '数据分析师 · 金融',
						tags: ['水瓶座', '现在活跃'],
						photos: [
							'/static/img/test1.jpg'
						]
					},
					{
						id: 7,
						name: '张伟',
						age: 28,
						occupation: '前端工程师 · IT/互联网',
						tags: ['狮子座', '最近活跃'],
						photos: [
							'/static/img/test2.jpg'
						]
					},
					{
						id: 8,
						name: '刘婷',
						age: 24,
						occupation: '心理咨询师 · 健康/医疗',
						tags: ['处女座', '现在活跃'],
						photos: [
							'/static/img/test1.jpg'
						]
					},
					{
						id: 9,
						name: '孙凯',
						age: 29,
						occupation: '项目经理 · 建筑',
						tags: ['白羊座', '最近活跃'],
						photos: [
							'/static/img/test2.jpg'
						]
					},
					{
						id: 10,
						name: '邓蕾',
						age: 31,
						occupation: '教师 · 教育',
						tags: ['金牛座', '离线'],
						photos: [
							'/static/img/test1.jpg'
						]
					}
				],
				currentIndex: 0,
				touchStartX: 0,
				touchStartY: 0,
				moveX: 0,
				moveY: 0,
				moving: false,
				cardWidth: 375,
			}
		},
		computed: {
			visibleCards() {
				// 显示当前卡片和后面两张卡片
				return this.cards.slice(this.currentIndex, this.currentIndex + 3)
			}
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight + 'px'
			this.statusNavHeight = getApp().globalData.statusNavHeight + 'px'
			this.marginNavTop = (getApp().globalData.statusBarHeight + getApp().globalData.statusNavHeight + 6) + 'px'
		},
		mounted() {
			// 延迟获取卡片宽度，确保DOM已渲染
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.card').boundingClientRect(data => {
					if (data) {
						this.cardWidth = data.width
					}
				}).exec()
			}, 100)
		},
		onReachBottom() {
			console.log('到底还在出发');
		},
		onLoad(option) {
			console.log(option, '传递的参数');
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			touchStart(e) {
				// 只处理当前显示的第一张卡片
				if (this.currentIndex >= this.cards.length) return
				this.moving = true
				this.touchStartX = e.touches[0].clientX
				this.touchStartY = e.touches[0].clientY
			},
			touchMove(e) {
				if (!this.moving) return
				const touchX = e.touches[0].clientX
				const touchY = e.touches[0].clientY
				this.moveX = touchX - this.touchStartX
				this.moveY = touchY - this.touchStartY
			},
			touchEnd(e) {
				if (!this.moving) return
				const threshold = this.cardWidth * 0.4
				if (Math.abs(this.moveX) > threshold) {
					this.processSwipe(this.moveX > 0)
				} else {
					this.resetCard()
				}
			},
			processSwipe(liked) {
				const duration = 0.2
				const currentCard = this.cards[this.currentIndex]
				const distance = liked ? this.cardWidth * 1.5 : -this.cardWidth * 1.5

				this.moveX = distance

				setTimeout(() => {
					if (this.currentIndex < this.cards.length - 1) {
						this.currentIndex++
						this.moveX = 0
						this.moveY = 0
						this.moving = false
						this.currentPhoto = 0
					}

					if (liked) {
						this.onLike(currentCard)
					} else {
						this.onDislike(currentCard)
					}
				}, duration * 1000)
			},
			resetCard() {
				this.moveX = 0
				this.moveY = 0
				setTimeout(() => {
					this.moving = false
				}, 200)
			},
			onLike(card) {
				console.log('喜欢', card)
				// 这里可以添加喜欢后的业务逻辑
			},
			onDislike(card) {
				console.log('不喜欢', card)
				// 这里可以添加不喜欢后的业务逻辑
			},
			photoChange(e) {
				this.currentPhoto = e.detail.current
			},
			resetAll() {
				this.currentIndex = 0
				this.moveX = 0
				this.moveY = 0
				this.moving = false
				this.currentPhoto = 0
				// 可以添加一个动画效果
				uni.showToast({
					title: '已重置',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			position: fixed;
			z-index: 5;
			background-color: #fff;

			.navbar {
				width: 100%;
				// border: 2rpx solid red;
				box-sizing: border-box;
			}

			.navTop {
				width: 100%;
				display: flex;

				.left {
					width: 180rpx;
					height: 100%;
					box-sizing: border-box;
					padding-left: 40rpx;

					.image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.center {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					font-family: 思源黑体;
					font-size: 38rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					color: #000000;
				}

				.right {
					width: 180rpx;
					height: 100%;
				}
			}

		}

		.content {
			flex: 1;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			background-color: #F7F8FA;
			padding: 0 12rpx;
			padding-bottom: 40rpx !important;
			position: relative;

			.cards-container {
				position: relative;
				height: 1000rpx;

				.card {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					width: 90%;
					height: 1000rpx;
					margin: 0 auto;

					&:nth-child(1) {
						z-index: 3;
					}

					&:nth-child(2) {
						z-index: 2;
					}

					&:nth-child(3) {
						z-index: 1;
					}

					.card-inner {
						width: 100%;
						height: 100%;
						background: #fff;
						border-radius: 20rpx;
						box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
						transition: all 0.3s;
						overflow: hidden;

						&:nth-child(1) {
							transform: translateX(0) rotate(0);
						}

						&:nth-child(2) {
							transform: scale(0.95) translateY(20rpx);
							opacity: 0.8;
						}

						&:nth-child(3) {
							transform: scale(0.9) translateY(40rpx);
							opacity: 0.6;
						}

						&.moving {
							transition: none !important;
						}
					}

					.photos-swiper {
						position: relative;
						height: 650rpx;
						overflow: hidden;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;

						.swiper {
							width: 100%;
							height: 100%;

							.photo {
								width: 100%;
								height: 100%;
							}
						}

						.photo-dots {
							position: absolute;
							top: 20rpx;
							left: 0;
							right: 0;
							display: flex;
							justify-content: center;
							gap: 8rpx;

							.dot {
								width: 40rpx;
								height: 4rpx;
								background: rgba(255, 255, 255, 0.4);
								border-radius: 2rpx;

								&.active {
									background: #fff;
								}
							}
						}
					}

					.info-section {
						position: relative;
						height: calc(100% - 650rpx);
						padding: 40rpx;
						display: flex;
						flex-direction: column;
						overflow: visible;

						.basic-info {
							margin-bottom: 20rpx;

							.name-age {
								display: flex;
								align-items: baseline;
								margin-bottom: 8rpx;

								.name {
									font-size: 36rpx;
									font-weight: 600;
									color: #333;
									margin-right: 16rpx;
								}

								.age {
									font-size: 28rpx;
									color: #666;
								}
							}

							.occupation {
								font-size: 26rpx;
								color: #999;
							}
						}

						.tags {
							display: flex;
							flex-wrap: wrap;
							gap: 16rpx;
							margin-bottom: 30rpx;

							.tag {
								padding: 8rpx 20rpx;
								background: #f5f5f5;
								border-radius: 24rpx;
								font-size: 24rpx;
								color: #666;
							}
						}
					}

					// 修改滑动提示图标样式
					.swipe-overlay {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 200rpx; // 放大图标
						height: 200rpx;
						opacity: 0;
						transition: opacity 0.2s;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 100%;
							height: 100%;
						}

						&.like {
							image {
								transform: rotate(-15deg);
							}
						}

						&.dislike {
							image {
								transform: rotate(15deg);
							}
						}
					}

					// 移动按钮样式到外层
					.action-buttons {
						position: absolute;
						bottom: 40rpx; // 调整按钮位置
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						gap: 60rpx; // 调整间距，因为现在有三个按钮
						z-index: 10;

						.action-btn {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #fff;
							box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
							transition: all 0.2s;

							image {
								width: 50%;
								height: 50%;
							}

							&.reset-btn {
								background: #F5F5F5;

								&:active {
									background: #E8E8E8;
									transform: scale(0.95);
								}
							}

							&.dislike-btn {
								&:active {
									background: #FFF5F5;
									transform: scale(0.95);
								}
							}

							&.like-btn {
								&:active {
									background: #F0FFF4;
									transform: scale(0.95);
								}
							}

							&:active {
								box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
							}
						}
					}
				}
			}
		}
	}
</style>